<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <title>sense_ok UI</title>
  <link rel="stylesheet" href="css/mdui.min.css"/>
</head>
<body class="mdui-bottom-nav-fixed">

  <div class="mdui-container-fluid">
  <div class="mdui-toolbar mdui-color-theme mdui-hoverable ">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon material-icons">&#xe5d2;</i></a>
  <span class="mdui-typo-title">Title</span>
  <div class="mdui-toolbar-spacer"></div>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon material-icons">&#xe8b6;</i></a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon material-icons">&#xe5d5;</i></a>
  <a href="javascript:;" class="mdui-btn mdui-btn-icon mdui-ripple"><i class="mdui-icon material-icons">&#xe5d4;</i></a>
</div>
    ...
    
    <ul class="mdui-list" style="max-width: 360px;">
          <li class="mdui-list-item mdui-ripple mdui-hoverable">
            <div class="mdui-list-item-content ">Inbox</div>
            <i class="mdui-list-item-icon mdui-icon material-icons"></i>
          </li>
          <li class="mdui-list-item mdui-ripple mdui-hoverable">
            <div class="mdui-list-item-content">Outbox</div>
            <i class="mdui-list-item-icon mdui-icon material-icons"></i>
          </li>
          <li class="mdui-list-item mdui-ripple mdui-hoverable">
            <div class="mdui-list-item-content">Trash</div>
            <i class="mdui-list-item-icon mdui-icon material-icons"></i>
          </li>
          <li class="mdui-list-item mdui-ripple mdui-hoverable">
            <div class="mdui-list-item-content">Spam</div>
            <i class="mdui-list-item-icon mdui-icon material-icons"></i>
          </li>
        </ul>
    <div class="mdui-container">
    ...
    <ul class="mdui-list mdui-list-dense">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar1.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-two-line"><span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood doing errands this weekend. Do you want ...</div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar2.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-two-line"><span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could come, but I'm out of town this weekend.</div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar"><img src="avatar3.jpg"/></div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-two-line"><span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris recommendations? Have you ever been?</div>
    </div>
  </li>
</ul>
    
  </div>
  </div>
  
<div class="mdui-bottom-nav mdui-color-blue ">
          <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-hoverable  mdui-bottom-nav-active">
            <i class="mdui-icon material-icons"></i>
            <label>主页</label>
          </a>
          <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-hoverable">
            <i class="mdui-icon material-icons"></i>
            <label>通讯录</label>
          </a>
          <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-hoverable">
            <i class="mdui-icon material-icons"></i>
            <label>发现</label>
          </a>
          <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-hoverable">
            <i class="mdui-icon material-icons"></i>
            <label>论坛</label>
          </a>
          <a href="javascript:void(0);" class="mdui-ripple mdui-ripple-white mdui-hoverable">
            <i class="mdui-icon material-icons"></i>
            <label>我的</label>
          </a>
        </div>


        <div id="box" style="visibility: visible; ">
        <p>您好，收到新消息： </p>
        <!--[include 'msgContent', data]-->
        </div>
<script id="msgContent" type="text/fxtpl">
  <p>时间：<!--[$test]--></p>
  <p>发送者：<!--[$nickname]--></p>
  <p>内容：<!--[$content]--></p>
</script>
<!-- <script>
var data = {
  date: '2014/06/20',
  sender: 'Jack',
  content: 'Hello, my friend'
};
Fxtpl.render('box', data);
</script> -->
<script src="need/jquery.min.js"></script>
<script src="js/mdui.min.js"></script>
<script src="js/sense8.min.js"></script>

<script src="opt/app_opt.js"></script>
</body>
</html>